{include file="public/header" /}
<link href="__CSS__/plugins/iCheck/custom.css" rel="stylesheet">
<body class="gray-bg" id="container">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>注册用户分布</h5>

        </div>
        <div class="ibox-content">
            <div class="hr-line-dashed"></div>

            <div class="example-wrap">
                <div class="example">
                    <div class="content" id="content" style="height: 500px;">
                    </div>
                </div>
                <!-- End Example Pagination -->
            </div>
        </div>
    </div>
    <!-- End Panel Other -->


</div>

{include file="public/footer" /}

<script>

    $(document).ready(function() {

        var app = new Vue({
            el: '#container',
            data: {

            },
            methods: {

            }
        })

        var echartModel = echarts.init(document.getElementById('content'));

        echartModel.on('click', function (params) {
            console.log(params.dataIndex)
            var times = params.dataIndex
            var title = ''
            if (times == 0) {
                title = '1单'
            } else if (times == 1) {
                title = '2单'
            } else if (times == 2) {
                title = '3单'
            } else {
                title = '3单以上'
            }

            layer.open({
                type: 2,
                title: title + '订单状态分布',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: '{:url("registerOrderInfo")}?times=' + params.dataIndex
            });
        });

        function setData() {

            $.ajax({
                type: 'post',
                url: "{:url('registerOrderData')}",
                dataType: 'json',
                data: {
                },
                success: function (data) {

                    echartModel.setOption({
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ['周一','周二','周三','周四','周五','周六','周日']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'直接访问',
                                type:'bar',
                                data:[320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name:'邮件营销',
                                type:'bar',
                                stack: '广告',
                                data:[120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name:'联盟广告',
                                type:'bar',
                                stack: '广告',
                                data:[220, 182, 191, 234, 290, 330, 310]
                            },
                            {
                                name:'视频广告',
                                type:'bar',
                                stack: '广告',
                                data:[150, 232, 201, 154, 190, 330, 410]
                            },
                            {
                                name:'搜索引擎',
                                type:'bar',
                                data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                                markLine : {
                                    lineStyle: {
                                        normal: {
                                            type: 'dashed'
                                        }
                                    },
                                    data : [
                                        [{type : 'min'}, {type : 'max'}]
                                    ]
                                }
                            },
                            {
                                name:'百度',
                                type:'bar',
                                barWidth : 5,
                                stack: '搜索引擎',
                                data:[620, 732, 701, 734, 1090, 1130, 1120]
                            },
                            {
                                name:'谷歌',
                                type:'bar',
                                stack: '搜索引擎',
                                data:[120, 132, 101, 134, 290, 230, 220]
                            },
                            {
                                name:'必应',
                                type:'bar',
                                stack: '搜索引擎',
                                data:[60, 72, 71, 74, 190, 130, 110]
                            },
                            {
                                name:'其他',
                                type:'bar',
                                stack: '搜索引擎',
                                data:[62, 82, 91, 84, 109, 110, 120]
                            }
                        ]
                    })

                },
                error: function (data) {

                }
            })

        }

        setData();

    })


</script>
</body>
</html>
